<template>
  <div class="home">
    <header>登陆页面</header>
    <div class="box">
      昵称: <input type="text"
      v-model="value1" placeholder="请输入用户名"
      v-on:input="hh" />
      <br />
      手机: <input type="text" v-model="value2"
      placeholder="请输入手机号" v-on:input="hh" />
      <br/>
      密码: <input type="text" v-model="value3"
      placeholder="请输入密码" v-on:input="hh" />
      <br />
      <button v-show="show" @click="go">登陆</button>
      <button v-show="!show">不可登录</button>
    </div>
  </div>
</template>

<script>
import header from "@/components/header"
export default {
  components:{
    header,
  },
  data(){
    return{
      show:false,
      value1:"",
      value2:"",
      value3:"",
    };
  },
  methods:{
    hh(){
      if(this.value1 != "" && this.value2 != "" && this.value3 != ""){
        this.show = true;
      }
    },
    go(){
      if(this.value1 != ""){
        if(this.value2.length >=6){
          const reg = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
          if(!reg.test(this.value2)){
            return alert("手机号错误");
          }
        }else{
          return alert("手机号长度不够");
        }
        if(this.value3.length >= 6){
          
        }else{
          return alert("密码长度不够");
        }
        if(this.value2.length >=6 && this.value3 >=6){
          var content = [];
          content.push(this.value3);
          content.push(this.value2);
          content.push(this.value1);
          this.$store.commit("Change",content);
          this.$router.push("/About")
        }
      }
    }
  }
}
</script>

<style  scoped>
div{
  width: 100%;
  height: 10rem;
  margin: 0 auto;
  text-align: center;
}
</style>